<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI面试官 - 简历管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="/static/css/dashboard.css" rel="stylesheet">
    <link href="/static/css/candidate/dashboard.css" rel="stylesheet">
    <style>
    /* 添加一些样式以使模态框看起来更好看 */
    #reportModalBody pre {
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        padding: 1rem;
        border-radius: 0.25rem;
        white-space: pre-wrap;       /* 保留空白符序列，但是正常地进行换行 */
        word-wrap: break-word;       /* 在长单词或 URL 地址内部进行换行 */
    }
    .high-score {
        background-color: #d4edda;
    }
</style>
</head>
<body class="dashboard-page">
    <div class="dashboard-container">
        <!-- 侧边栏 -->
       <nav id="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class='bx bx-bot'></i>
                    <span>AI面试官</span>
                </div>
            </div>
            <ul class="nav-links">
                <li>
                    <a href="/applicant/dashboard">
                        <i class='bx bxs-dashboard'></i>
                        <span>控制台</span>
                    </a>
                </li>
{#                <li>#}
{#                    <a href="/applicant/sim_interview">#}
{#                        <i class='bx bx-video'></i>#}
{#                        <span>模拟面试</span>#}
{#                    </a>#}
{#                </li>#}
                <li>
                    <a href="/applicant/interview">
                        <i class='bx bx-video'></i>
                        <span>面试中心</span>
                    </a>
                </li>
                <li>
                    <a href="#" data-bs-toggle="collapse" data-bs-target="#resumeMenu" aria-expanded="false" aria-controls="resumeMenu">
                        <i class='bx bx-file'></i>
                        <span>简历中心</span>
                        <i class='bx bx-chevron-down'></i> <!-- 添加展开图标 -->
                    </a>
                    <ul class="collapse" id="resumeMenu">
                        <li>
                            <a href="/applicant/resume">
                                <i class='bx bx-file'></i>
                                <span>简历上传</span>
                            </a>
                        </li>
                        <li>
                            <a href="/applicant/analyze_resume">
                                <i class='bx bx-file'></i>
                                <span>简历分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="/applicant/upload_resume">
                                <i class='bx bx-file'></i>
                                <span>投递简历</span>
                            </a>
                        </li>
                        <li class="active">
                            <a href="/applicant/resume_manage">
                                <i class='bx bx-file'></i>
                                <span>简历管理</span>
                            </a>
                        </li>
                    </ul>
                </li>
{#                <li>#}
{#                    <a href="/applicant/reports">#}
{#                        <i class='bx bx-line-chart'></i>#}
{#                        <span>面试报告</span>#}
{#                    </a>#}
{#                </li>#}
{#                <li>#}
{#                    <a href="/applicant/interview_manage">#}
{#                        <i class='bx bx-line-chart'></i>#}
{#                        <span>面试管理</span>#}
{#                    </a>#}
{#                </li>#}


{##}
{#                <li>#}
{#                    <a href="/applicant/personal_center">#}
{#                        <i class='bx bx-user'></i>#}
{#                        <span>个人中心</span>#}
{#                    </a>#}
{#                </li>#}
            </ul>
        </nav>

        <!-- 在sidebar后面添加 -->
        <div class="sidebar-overlay"></div>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <div class="top-bar">
                <div class="user-menu">
                    <img src="{{ url_for('static', filename='applicant_logo/img.png') }}" alt="用户头像" class="avatar">
                    <div class="dropdown">
                        <button class="btn dropdown-toggle" type="button" id="userDropdown" data-bs-toggle="dropdown">
                            {{ full_name }}
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="profile.html">个人设置</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout">退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="dashboard-content">
                <h1 class="mb-4">简历管理</h1>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>文件名</th>
                            <th>上传时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="resumeList">
                        <!-- 简历列表将动态加载到这里 -->
                    </tbody>
                </table>
            </div>
        </main>
    </div>

    <!-- Modal -->
<div class="modal fade" id="reportModal" tabindex="-1" aria-labelledby="reportModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="reportModalLabel">分析报告</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="reportModalBody">
                <!-- Report data will be displayed here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
    function viewResume(resumeId) {
        fetch(`/api/get_parsed_data?resume_id=${resumeId}`)
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                if (data.success) {
                    const modal = document.getElementById('reportModal');
                    const modalBody = document.getElementById('reportModalBody');
                    modalBody.innerHTML = `<pre class="prettyprint">${JSON.stringify(JSON.parse(data.parsed_data), null, 2)}</pre>`;
                    new bootstrap.Modal(modal).show();
                } else {
                    alert('获取解析数据失败: ' + data.message);
                }
            })
            .catch(function(error) {
                console.error('Error fetching parsed data:', error);
                alert('获取解析数据失败');
            });
    }

    function analyzeResumeReport(resumeId) {
    fetch('/api/analyze_resumeReport', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ resume_id: resumeId }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // 跳转到报告页面
            window.location.href = '/applicant/resume_report';
        } else {
            alert('分析简历失败: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('请求失败，请稍后重试');
    });
}

    document.addEventListener('DOMContentLoaded', function() {
        fetch('/api/get_resumesbyUser')
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                if (data.success) {
                    const resumeList = document.getElementById('resumeList');
                    data.resumes.forEach(resume => {
                        const row = document.createElement('tr');
                        row.className = resume.total_score >= 8 ? 'high-score' : '';
                        row.innerHTML = `
                            <td>${resume.filename}</td>

                            <td>${resume.upload_date}</td>
                            <td>
                                <button class="btn btn-primary btn-sm" onclick="viewResume('${resume.resume_id}')">查看简历</button>
                                ${resume.report ? 
                                    `<button class="btn btn-primary btn-sm" onclick="analyzeResumeReport('${resume.resume_id}')" style="background: dodgerblue">查看分析报告</button>` :'' 
                                }
{#                                <button class="btn btn-primary btn-sm" onclick="downloadResume('${resume.file_url}')" style="background: darkgreen">下载简历</button>#}
                            </td>
                        `;
                        resumeList.appendChild(row);
                    });
                } else {
                    alert('获取简历列表失败: ' + data.message);
                }
            })
            .catch(function(error) {
                console.error('Error fetching resumes:', error);
                alert('获取简历列表失败');
            });

        document.getElementById('searchInput').addEventListener('input', function() {
            const filter = this.value.toLowerCase();
            const rows = document.querySelectorAll('#resumeList tr');
            rows.forEach(row => {
                const name = row.cells[0].textContent.toLowerCase();
                const email = row.cells[1].textContent.toLowerCase();
                const fileName = row.cells[2].textContent.toLowerCase();
                if (name.includes(filter) || email.includes(filter) || fileName.includes(filter)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });
    });

    function downloadResume(fileUrl) {
        window.open(fileUrl, '_blank');
    }
</script>
</body>
</html>